<template>
  <div>
    <bread-com :breadList="breadList"></bread-com>
    <div class="form_wrap">
      <el-input v-model="searchText"></el-input>
      <span> 专业选择：</span>
      <el-select v-model="CategoryOne">
        <el-option
          v-for="item in opt1"
          :label="item.label"
          :value="item.value"
          :key="item"
        ></el-option>
      </el-select>
      <el-select v-model="CategoryTwo">
        <el-option
          v-for="item in opt2"
          :label="item.label"
          :value="item.value"
          :key="item"
        ></el-option>
      </el-select>
      <el-select v-model="CategoryThree">
        <el-option
          v-for="item in opt3"
          :label="item.label"
          :value="item.value"
          :key="item"
        ></el-option>
      </el-select>
      <el-button type="success" @click="toSearch()">查询</el-button>
      <el-button type="primary" @click="toADD()">添加</el-button>
      <button v-power>哈哈哈</button>
    </div>

    <table-title tableTitle="课程列表"></table-title>
    <div class="table_wrap">
      <el-table :data="courseList">
        <el-table-column label="课程名称" prop="Cname"> </el-table-column>
        <el-table-column label="课程代号" prop="Cnumber"> </el-table-column>
        <el-table-column label="在学人数" prop="onlineUser"> </el-table-column>
        <el-table-column label="编辑日期">
          <template slot-scope="scope">
            <div>
              {{ new Date(scope.row.createAt).toLocaleString() }}
            </div>
          </template>
        </el-table-column>
        <el-table-column label="状态">
          <template slot-scope="scope">
            <div>
              {{ getState(scope.row.isState) }}
            </div>
          </template>
        </el-table-column>
        <el-table-column label="操作">
          <template slot-scope="scope">
            <div>
              <el-link
                :type="
                  scope.row.isState == '1' || scope.row.isState == '3'
                    ? 'success'
                    : 'primary'
                "
                @click="upDown(scope.row.ID)"
                >{{
                  scope.row.isState == '1' || scope.row.isState == '3'
                    ? '上架'
                    : '下架'
                }}</el-link
              >
              <el-link
                type="primary"
                @click="turnEdit(scope.row.ID, scope.row._id)"
                >编辑</el-link
              >
              <el-link type="danger" @click="delCourse(scope.row._id)"
                >删除</el-link
              >
              <el-link type="warning" @click="top(scope.row.ID)">{{
                scope.row.isTop ? '取消置顶' : '置顶'
              }}</el-link>
            </div>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination
        :page-size="3"
        @current-change="pageChange"
        :total="1000"
        background
      ></el-pagination>
    </div>
  </div>
</template>
<script>
// 混入的分类 专业选择的数据
import cateData from '../../utils/cate'
import tableTitle from '../../components/tableTitle.vue'
import breadCom from '../../components/breade.vue'
// 导入的课程列表接口
import {
  _getCourseList,
  _upAndDown,
  _delCourse,
  _isTop
} from '../../api/courselist'
export default {
  components: { tableTitle, breadCom },
  mixins: [cateData],
  data () {
    return {
      breadList: [
        { title: '课程管理', path: '' },
        { title: '课程列表', path: '' }
      ],
      searchText: '',
      CategoryOne: '',
      CategoryTwo: '',
      CategoryThree: '',
      pageStart: 1,
      courseList: [] //课程列表
    }
  },
  created () {
    this.getCourseList()
  },
  methods: {
    turnEdit (ID, _id) {
      //去到课程编辑
      this.$router.push({
        name: 'courseadd',
        query: {
          ID: ID,
          _id: _id
        }
      })
    },
    toADD () {
      this.$router.push({
        name: 'courseadd'
      })
    },
    // 分页
    pageChange (val) {
      this.pageStart = val
      this.getCourseList()
    },
    // 搜索
    toSearch () {
      this.getCourseList()
      this.searchText = ''
      this.CategoryOne = ''
      this.CategoryTwo = ''
      this.CategoryThree = ''
    },
    // 课程置顶
    async top (ID) {
      var res = await _isTop(ID)
      console.log(res)
      this.getCourseList()
    },
    // 删除课程接口
    async delCourse (_id) {
      console.log(_id)
      var res = await _delCourse(_id)
      console.log(res)
      this.getCourseList()
    },
    // 课程上架下架
    async upDown (ID) {
      var res = await _upAndDown(ID)
      console.log(res)
      if (res.success) {
        this.$message.success('更新成功')
        this.getCourseList()
      }
    },
    getState (state) {
      if (state == '1') {
        return '草稿'
      } else if (state == '2') {
        return '已上架'
      } else if (state == '3') {
        return '已下架'
      }
    },
    async getCourseList () {
      // 获取课程列表接口
      var res = await _getCourseList({
        searchText: this.searchText,
        CategoryOne: this.CategoryOne,
        CategoryTwo: this.CategoryTwo,
        CategoryThree: this.CategoryThree,
        pageStart: this.pageStart
      })
      console.log(res)
      this.courseList = res.data.list
    }
  }
}
</script>
<style lang="less" scoped>
.form_wrap {
  width: 80%;
  margin: 40px auto;
  display: flex;
  justify-content: space-around;
  .el-input {
    width: 300px;
  }
  span {
    line-height: 40px;
  }
}
.table_wrap {
  width: 80%;
  margin: 0 auto;
}
</style>
